<template>
  <div class="tripinit">
    <van-tabs v-model:active="active" line-width="0px">
      <van-tab :title="txt1">
        <!-- 二级选项卡 -->
        <div class="subTab" v-if="subnav">
          <van-tabs>
            <van-tab :title="subtxt1">
              <!-- 输入框 -->
              <div class="nice_shuru">
                <van-cell-group inset>
                  <van-field v-model="value1" placeholder="地区" />
                  <van-field v-model="value2" placeholder="日期" />
                </van-cell-group>
              </div>
              <!-- 火车飞机出租汽车切换单选按钮 -->
              <div class="nice_train" v-if="trainbool">
                <van-checkbox-group v-model="checked" direction="horizontal">
                  <van-checkbox name="a">学生票</van-checkbox>
                  <van-checkbox name="b">高铁动车</van-checkbox>
                </van-checkbox-group>
              </div>
              <div class="nice_phone" v-else-if="phonebool">
                <van-checkbox-group v-model="checked" direction="horizontal">
                  <!-- 机舱的位置 -->
                  <div class="Ship">舱位选择</div>
                  <div class="package">
                    <van-checkbox name="a">带儿童</van-checkbox>
                    <van-checkbox name="b">带婴儿</van-checkbox>
                  </div>
                </van-checkbox-group>
              </div>
              <!-- BUtton按钮 -->
              <div class="nice_button">
                <van-button type="danger">查询</van-button>
              </div>
            </van-tab>
            <van-tab :title="subtxt2">内容 2</van-tab>
            <van-tab :title="subtxt3">内容 3</van-tab>
          </van-tabs>
        </div>
        <slot name="newtext" v-else></slot>
      </van-tab>
      <van-tab :title="txt2">内容 2</van-tab>
    </van-tabs>
  </div>
  <div class="query">最近查询</div>
</template>
<script>
import {
  Tab,
  Tabs,
  Field,
  CellGroup,
  Checkbox,
  CheckboxGroup,
  Button,
} from "vant"; //组件
import { ref, toRefs } from "vue";
export default {
  props: {
    txt1: String,
    txt2: String,
    subtxt1: String,
    subtxt2: String,
    subtxt3: String,
    subnav: Boolean, //二级的是否需要
    trainbool: Boolean,
    phonebool: Boolean,
  },
  setup(props) {
    let value1 = ref("");
    let value2 = ref("");
    let {
      txt1,
      txt2,
      trainbool,
      phonebool,
      subtxt1,
      subtxt2,
      subtxt3,
      subnav,
    } = toRefs(props);
    const active = ref(0);
    const checked = ref();
    return {
      value1,
      value2,
      active,
      checked,
      subnav,
      txt1,
      txt2,
      subtxt1,
      subtxt2,
      subtxt3,
      trainbool,
      phonebool,
    };
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Button.name]: Button,
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/styles/less/Tripinit.less";
</style>
